<template>
  <div class="charts_container">
    <div :id="chartId" style="width: 100%;height: 100%;" v-if="data.length"></div>
    <div class="no_data" v-else>暂无数据</div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: []
    },
    chartId: {
      type: String,
      required: true
    }
  },
  mounted() {
    this._initCharts()
  },
  methods: {
    _initCharts () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.chartId))
      
      let colorList = [ '#5E52CD', '#52D1BE','#C17C52']
      let dataArr = this.data
      const option = {
          tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            //   show:false,
              orient: 'horizontal',
              icon: 'react',
            //   bottom : this.$options.filters.fontSize(0.3),
              width: '35%',
              left: '60%',
              top: '20%',
              itemGap : this.$options.filters.fontSize(0.1),
              itemHeight: this.$options.filters.fontSize(0.06),
              itemWidth: this.$options.filters.fontSize(0.14),
              textStyle: {
                  fontSize: this.$options.filters.fontSize(0.16),
                  color: "#fff"
              }
              
          },
          series: [{
              type: 'pie',
              center: ['30%', '50%'],
              radius: ['35%', '75%'],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                  normal: {
                      color: function(params) {
                          return colorList[params.dataIndex]
                      }
                  }
              },
              label: {
                  show: false,
                  position: 'outside',
                  // formatter: '{a|{b} \n {d}%}',
                  textStyle: {
                    fontSize: this.$options.filters.fontSize(0.16)
                  },
                  rich: {
                      hr: {
                          backgroundColor: 't',
                          borderRadius: 0,
                          width: 0,
                          height: 0,
                      },
                  }
              },
              labelLine: {
                  normal: {
                      length: 8,
                      length2: 8,
                      lineStyle: {
                          width: 0
                      }
                  }
              },
              data: dataArr,
          }]
      };





      // 绘制图表
      myChart.setOption(option)

    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 100%;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
.no_data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #a3a3a3;
}
</style>